<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="/blog/echo/v1.0/Public/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/blog/echo/v1.0/Public/css/main.css">
	<link rel="stylesheet" type="text/css" href="/blog/echo/v1.0/Public/css/jquery-ui.css">
	<link rel="stylesheet" type="text/css" href="/blog/echo/v1.0/Public/css/font-awesome.min.css">
	
	<script src="/blog/echo/v1.0/Public/js/staticAction.js" type="text/javascript"></script>
	<script src="/blog/echo/v1.0/Public/js/vue.min.js" type="text/javascript"></script>
	<script src="/blog/echo/v1.0/Public/js/jquery.min.js" type="text/javascript"></script>
	<script src="/blog/echo/v1.0/Public/js/jquery-ui.js" type="text/javascript"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		var sessionInfo = '<?php echo json_encode(session("uinfo")); ?>';
		sessionInfo = JSON.parse(sessionInfo);
		var staticRUL = "/blog/echo/v1.0/Public";
		var staticApi = "/blog/echo/v1.0/";
	</script>
</head>
<body>

<!-- 模态框（Modal） -->
<div class="modal" id="sign-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
       	<div class="sign signin">
    		<div class="sign-header">
    			<button class="login-btn select-active"> 登陆 </button>
    			<button class="regist-btn"> 注册 </button>
    			<i style="float: right;display: block;margin-top: 10px;margin-right: 10px;" class="fa fa-close" data-dismiss="modal" aria-hidden="true"></i>
    			<i class="line"></i>
    		</div>

    	<div class="sign-content" style="margin: 20px 10px;">
    		  <div class="form-group">
   					<input name="usercount" autocomplete="off" type="text" class="form-control" id="sign_count" placeholder="请输入手机号/邮箱">
  			</div>
  			<div class="form-group">
   					<input name="password" autocomplete="off" type="password" class="form-control" id="sign_pwd" placeholder="请输入密码">
  			</div>
    		<div class="form-group" >
    				<input name="verifycode" id="VerifyText" style="width: 70%;display: inline-block;height: 40px;" type="text" class="form-control" placeholder="请输入验证码">	
    				<img id="registVerify" style="height: 100%;width: 28%;" src="<?php echo U('Request/getVerify');?>">
    				<script type="text/javascript">
    					$("#registVerify").click(function() {
    						$(this).attr("src",$(this).attr("src"));	 
    					});
    				</script>
  			</div>
  			<button id="signin-btn" type="button" class="btn btn-success" style="margin-left: auto; margin-right: auto; width: 100%;" >登陆</button>
  			<p id="sign-remind" style="color: red;padding-top: 5px;"></p>
    	</div>	

    	</div>

    </div><!-- /.modal-dialog -->
</div>


<div class="modal" id="lyrics-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   
       	<div class="lyrics">
       		<div style="position: relative;height: 100%;width: 100%;">
       				<div class="refresh"> <i class=" fa fa-spinner fa-pulse fa-4x"></i></div>  
       				<p > </p>			
       		</div>	
    	</div>
</div>




<main id="app">
<div class="headerv1">
	<div class="headerv1-nav">
		<a href="<?php echo U('Index/index');?>" class="nav index action">首页</a>
		<div class="nav has-list">
			<a href="javascript:;">发现</a>
			<ul class="nav-list">
				<li><a href="#/aa">频道</a></li>
				<li><a href="#/aa">名人</a></li>
				<li><a href="#/aa">朋友圈</a></li>
				<li><a href="#/aa">专辑</a></li>
			</ul>
		</div>
		<a href="#/" class="nav">动态</a>
		<a href="#/" class="nav">下载</a>
	</div>

	<div class="nav-logo">
		<img src="/blog/echo/v1.0/Public/img/2c35330d407d3f6edb9d09a4ce563da9-1.png">
	 </div>
 	<div class="headerv1-user">	
 		<a  href="#" class="user-login"><?php  echo session("uinfo")["email"]?"":"登录"; ?></a>
 		<img style="display: none;" class="signin-head-icon" src="">
 		<ul class="sign-list-view">
 			<li><a href="<?php echo U('User/edit');?>">个人信息</a></li>
 			<li><a href="<?php echo U('User/mycollect');?>">我的收藏</a></li>
 			<li id="sign-user-logout"><a href="javascript:;">退出登录</a></li>
 		</ul>
 		
 		
 	</div>
 	<div class="headerv1-upload">
 		<a href="#" class="upload-btn">上传歌曲</a>
 	</div>
 	<div class="headerv1-search">
 		<input class="search-input" type="text" name="search" placeholder="搜索内容">
 	</div>
</div>

	<main class="main-center">

		<div class="channel-head">  

			<div class="channel-info">
				 <h3><?php echo ($data["name"]); ?></h3>
				 <div>
					<img class="channel-img" alt="aaa" src="<?php echo ($data["pic"]); ?>">
					<div class="cnl-instr">
						
						<p class="cnl-instr-head">频道简介</p>
						<p class="cnl-instr-content"><?php echo ($data["info"]); ?></p>
						<span class="left-music"><?php echo ($data["sound_count"]); ?></span>
						<span class="left-people"><?php echo ($data["follow_count"]); ?></span>
						<span class="left-share"><?php echo ($data["share_count"]); ?></span>
					</div>
				</div>
			</div>
		 </div>

		<div class="music-info">	
			<ul>	
				<li  class="music_list" v-for="(item,index) in music_list">
					<div v-on:click = "music_play(item.source,item.name,item.pic,index)"  class="info-view">
						<div class="music-playback"><i class="play-icon"></i></div>
						<div class="music-img">
							<img  v-bind:src="item.pic">
							<span >{{music_length(item.length)}}</span>
						</div>
						<p class="music-name">{{item.name}}</p>
						<div class="music-status">
							<ul>
								<li>
									<i class="like"></i>
									<span>{{numberChangeAction(item.like_count)}}</span>
								</li>
								<li>
									<i class="share"></i>
									<span>{{numberChangeAction(item.share_count)}}</span>
								</li>
								<li>
									<i class="content"></i>
									<span>{{numberChangeAction(item.comment_count)}}</span>
								</li>

							</ul>
						</div>
						</div>
					</div>
				</li>
			</ul>
	
		
		</div>

		<div  style="text-align: center;">
			<ul class="pagination page-controll">
    		<li  v-for=" item in page_list">
         		<a href="javascript:void(0)" v-on:click="pageAction" v-bind:class="item.isSelect">{{item.page}}</a>
    		</li>
		</ul>
		</div>
		
	</main>
<div style="height: 120px;"></div>

</main>

<div class="foot-play-view">
	<div class="foot-music-tro">
		<div class="play-progress-tro">
			<div style="width: 100%;height: 100%;position: relative;">
				<img class="play-music-image" alt="music" src="/blog/echo/v1.0/Public/img/f0fc26f17b1b61a73540d0297f7cca71.png">
				<div class="progress-view">
					<p class="play-music-name">echo</p>
					<div class="progress-time">
						<span class="progress-currecttime">0:00</span>
						<span class="progress-endtime">0:00</span>
						<div class="progress-block-view"> 
							<div class="progress-block">
								<div class="progress-playing"></div>
							</div>
						</div>
						
					</div>
				</div>

			</div>
	</div>
	
	<div class="left-music-tro">
		<i id="foot-player-last"  class="fa fa-step-backward fa-1x"></i>
		<i id="foot-player-play" class="fa fa-play fa-1x"></i>
		<i id="foot-player-next" class="fa fa-step-forward fa-1x"></i>
	</div>

	<div class="right-music-tro">
		
		<div class="audio-volume-view">
			<i class="fa fa-volume-up"></i>
			<div class="audio-volume-ctro">
				<div class="audio-volume-slider"></div>
			</div>



		</div>



	</div>


</div>

	</div>





	
</div>


<script src="/blog/echo/v1.0/Public/js/audioUtil.js" type="text/javascript"></script>
<script type="text/javascript">
	var channelID = <?php echo ($data["source_id"]); ?>;
	var Mpage_list = basePagListAction();


	var audio = new Audio();
	audio.controls = false;
	$(".foot-play-view").append(audio);

 	$(function() {
 		$(".progress-block").slider({
 			value:0,
	 		slide: function( event, ui ) {
	 			var allTime = audio.duration;
	 			if (!isNaN(allTime)) {
	 				$('.progress-playing').css("width",ui.value+"%");
	 				audio.currentTime = allTime*ui.value*0.01;
	 			}
     		 },
     		 stop:function( event, ui ) {
	 			var allTime = audio.duration;
	 			if (isNaN(allTime)) {
	 				$(this).slider("value",0);
	 			}
     		 },
		});

 		audio.ontimeupdate = function() {
 			var currentTime = audio.currentTime;
 			var allTime = audio.duration;
 			var per = currentTime/allTime;
 			if (allTime > 0) {
 				$(".progress-currecttime").text(formatSeconds(parseInt(currentTime)));
 				$(".progress-endtime").text(formatSeconds(parseInt(allTime)));
 			}
 			$(".progress-block .ui-slider-handle").css("left",per*100 +"%");
 			$('.progress-playing').css("width",per*100+"%");
 		};

 		audio.onended = function() {
 			nextAction();
		};

 		$("#foot-player-play").click(function() {
 			if (audio.paused && audio.src) {
				audio.play();
				$(this).removeClass("fa-play");
				$(this).addClass("fa-pause");
 			}else {
 				$(this).removeClass("fa-pause");
				$(this).addClass("fa-play");
 				audio.pause();
 			}	
 		})
		$("#foot-player-next").click(function() {
			nextAction();
		});
		$("#foot-player-last").click(function() {
			lastAction();
		});


		function lastAction() {
			var index = vue.current_play;
			var music_info;
			if(index == 0) {
				index = vue.music_list.length-1;
				music_info = vue.music_list[index];	
			}else {
				index = index-1;
				music_info = vue.music_list[index];	
			}
			vue.music_play(music_info.source,music_info.name,music_info.pic,index);

		}

		function nextAction() {
			var index = vue.current_play;
			var music_info;
			if(index == vue.music_list.length-1) {
				index = 0;
				music_info = vue.music_list[0];	
			}else {
				index = index+1;
				music_info = vue.music_list[index];	
			}
			vue.music_play(music_info.source,music_info.name,music_info.pic,index);
		}


		// volume  controll 

		$(".audio-volume-slider").slider({
			value:100,
			slide:function(event, ui) {
				audio.volume = ui.value *0.01
			}
		});


 	});


var vue = new Vue({
		el: '#app',
		data:{
			music_list:[],
			currect_page:1,
			page_list:Mpage_list,
			current_play:0,
			current_obj:""
		},
		created:function() {
  			this.fetchData();
  		},
  		methods:{
  			fetchData:function() {
  				var t = this;
  				$.get("<?php echo U('Api/getMusicInfo');?>",{"channel_id":channelID,"page":t.currect_page},function(data) {
  						var datainfo = data;
  						console.log(data);
  						if ( datainfo["rt"] == 1) {
  							t.music_list = datainfo["data"];
  						}

  						})
  			},
  			getSoundInfo:function(){
  				var t = this;
  				var id = t.current_obj.id;
  				if (t.current_obj.lyrics) {return;}
  				$.get(staticApi+"Api/getSoundInfo",{"id":id},function(data) {
				$("#lyrics-modal .refresh").css("display","none");
				var info = data["data"]["info"];
					t.current_obj.lyrics = info;
				});

  			},
  			pageAction:function(e) {
  				var info = e.target.innerHTML;
       			var t_currect_page = this.currect_page;
        		var t_page_list = this.page_list;
        		var t_length = this.music_list.length;
        		var pageRs = pageChangeAction(info,t_currect_page,t_page_list,t_length,15);
        		if (pageRs == undefined) {return};
        		this.page_list = pageRs.page_list;
        		this.currect_page = pageRs.currect_page;
  				this.fetchData();
  			},
  			music_play:function(src,name,pic,index) {
  				audio.src = src;
  				audio.play();
  				$("#foot-player-play").addClass("fa-pause");
  				$(".play-music-name").text(name);
  				$(".play-music-image").attr('src',pic);
  				this.current_play = index;
  				this.current_obj = this.music_list[this.current_play];
  				
  				this.getSoundInfo();
  			},
  			music_length:function(a) {
  				return formatSeconds(a);
  			},
  			numberChangeAction:function(a) {
  				return numberChangeInfo(a);
  			},
  		}
});
	
  
	 
</script>


<script src="/blog/echo/v1.0/Public/js/main.js" type="text/javascript"></script>
</body>
</html>